<template>
	<view>
		<view class="header">
			<u-navbar :border-bottom='false' back-icon-size='48' title="课程详情" :background='background'
				title-color='#FFFFFF' back-icon-color='#FFFFFF'></u-navbar>
			<view class="infoBox">
				<image :src="data.series_pic" mode=""></image>
				<view class="cont">
					<view class="title">
            {{ data.series_name }}
					</view>
					<view class="user">
						<image :src="data.owner_avatar" mode=""></image>
						<text>{{ data.owner_name }}</text>
					</view>
					<view class="tip">
            {{ data.subtitle }}
					</view>
				</view>
			</view>
			<view class="intro" v-if="!isDwon">
				<view class="text">
					{{data.summary}}
				</view>
				<view class="open" @click="isDwon=true">
					展开<u-icon name="arrow-down" color="rgba(255,255,255,0.8)" size="24"></u-icon>
				</view>
			</view>
			<view class="intro" v-if="isDwon">
        {{data.summary}}
			</view>
			<view class="close" v-if="isDwon" @click="isDwon=false">
				收起<u-icon name="arrow-up" color="rgba(255,255,255,0.8)" size="24"></u-icon>
			</view>
		</view>
		<view class="content">
			<view class="content-ul">
				<view class="content-li" v-for="(item,index) in data.class.data" :key="index" @click="navTo('./audio/audio?id='+item.id)">
					<view class="icon" :style="{background:'url('+item.class_pic+') no-repeat 100% 100%'}">
						<view class="type">
              {{ item.is_free }}
						</view>
					</view>
					<view class="name">
            {{ item.class_name }}
					</view>
				</view>
			</view>
		</view>
		<view class="btnBox">
			<view class="btn">
				开启VIP享受全套免费
			</view>
		</view>
		
	</view>
</template>

<script>
  import myRequest from '@/api/educate.js'
	export default {
		data() {
			return {
				isDwon: false,
				background: {
					backgroundColor: 'rgba(255,255,255,0)'
				},
				icon: '../../../../static/imgs/del/del.png',
        id:1,
        data:{}
			}
		},
    onLoad(options){
      this.id = options.id

      this.getDetails()
    },
    methods:{
      async getDetails(){
        let res = await myRequest.getEducateDetails({id:this.id})
        if(res.status){
          this.data = res.data
          //this.$store.commit('changeAudioItems',this.data.class.data)
          //console.log(this.data)
        }
      },
      navTo(url) {
        uni.navigateTo({
                         url: url
                       })
      }
    }
	}
</script>

<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang='scss' scoped>
	.header {
		width: 100%;
		height: auto;
		background: linear-gradient(69deg, #062A40, #0A3957);
		padding: 0 20rpx 40rpx;

		.infoBox {
			display: flex;

			image {
				width: 216rpx;
				height: 216rpx;
				border-radius: 16rpx;
			}

			.cont {
				margin-left: 20rpx;

				.title {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
				}

				.user {
					display: flex;
					align-items: center;
					margin-top: 20rpx;

					image {
						width: 60rpx;
						height: 60rpx;
						border-radius: 50%;
					}

					text {
						margin-left: 6rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: rgba(255, 255, 255, 0.8);
					}
				}

				.tip {
					margin-top: 20rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: rgba(255, 255, 255, 0.8);
				}
			}
		}

		.intro {
			margin-top: 30rpx;
			width: 710rpx;
			padding: 20rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 16rpx;
			color: rgba(255, 255, 255, 0.8);
			display: flex;

			.text {
				width: 90%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			.open {
				width: 96rpx;
				height: 36rpx;
				background: rgba(0, 0, 0, 0.25);
				border-radius: 40rpx;
				font-size: 20rpx;
				font-family: PingFang SC;
				font-weight: 400;
				text-align: center;
				line-height: 36rpx;
			}
		}

		.close {
			margin: 20rpx auto 0;
			width: 96rpx;
			height: 36rpx;
			background: rgba(255, 255, 255, 0.1);
			border-radius: 40rpx;
			font-size: 10px;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 14px;
			color: rgba(255, 255, 255, 0.8);
			text-align: center;
			line-height: 36rpx;
		}
	}

	.content {
		margin-top: -20rpx;
		width: 100%;
		height: auto;
		background-color: #FFFFFF;
		border-radius: 24rpx 24rpx 0px 0px;
		overflow: hidden;
		padding: 28rpx 20rpx 0;

		.content-ul {
			display: flex;
			flex-wrap: wrap;

			.content-li {
				width: 228rpx;
				margin-bottom: 20rpx;
				&:nth-child(3n-1){
					margin: 0 13rpx;
				}
				.icon {
					width: 228rpx;
					height: 228rpx;
					border-radius: 16rpx;
					position: relative;
					.type{
						position: absolute;
						bottom: 0;
						right: 0;
						width: fit-content;
						height: 32rpx;
						background: #FDE2E2;
						border-radius: 16rpx 0px 16rpx 0px;
						font-size: 20rpx;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 32rpx;
						color: #F93739;
						text-align: center;
						padding: 0 20rpx;
					}
				}
			
				.name{
					margin-top: 8rpx;
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}
			}
		}
	}
	
	.btnBox{
		margin-top: 40rpx;
		padding: 12rpx 0;
		width: 100%;
		height: 112rpx;
		background: #FFFFFF;
		box-shadow: 6rpx 0px 12rpx rgba(0, 0, 0, 0.05);
		.btn {
			width: 710rpx;
			height: 88rpx;
			background: linear-gradient(180deg, #218BFF 0%, #3064FC 100%);
			border-radius: 16rpx;
			font-size: 34rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 88rpx;
			margin: 0 auto;
			text-align: center;
		}
	}

</style>
